<script setup lang="ts">
import { getNoticeDetail, NoticeDetail } from "@/api";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import useDialogProp from "./useDialogProps";
const emit = defineEmits(["close"]);
const detailinfo = ref<NoticeDetail>(),
  { showSelf, handleClose } = useDialogProp();
function closeWrapper() {
  handleClose(() => [emit("close")]);
}
function show(id: number) {
  getNoticeDetail({ id })
    .then((data) => {
      detailinfo.value = data;
      showSelf.value = true;
    })
    .catch((e) => {
      ElMessage.error(e);
    });
}
defineExpose({ show });
onMounted(() => {});
</script>
<template>
  <el-drawer
    v-model="showSelf"
    direction="rtl"
    size="80%"
    @close="closeWrapper"
    :title="detailinfo?.title"
  >
    <template #header>
      <h4>{{ detailinfo?.title }}</h4>
    </template>
    <div v-html="detailinfo?.content"></div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="closeWrapper()">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>
